Flexible Box Model
The web applications and the web pages that we see today are complex in nature. Prior to CSS3, web designers used floats and other CSS properties to design their web pages. However, it is not easy to style complicated web pages using CSS2.
Hence, the concept of the Flexible Box Model was conceived to make it easier to design web pages keeping in sync with the times.
Flexbox consists of a Flex Container. It also consists of Flex Items, which are the children of the Flex Container. We will use the display property of CSS to explain the functionality. The display property is set to flex or inline-flex. If we use display: flex;, the Flex Container functions at the block level whereas if we use display: inline-flex;, then it is considered inline within the defined boundaries.
Example.
.flex-container
{
display: flex; display: –webkit-flex;
}
If we look at the code, we can see that flex is defined twice. We have added the
–webkit prefix to flex for a specific reason. The new Flexbox model is still not supported by all browsers. The –webkit prefix is used as we are using the Chrome browser. If the latest version of Firefox would support it, then a –moz prefix will be added to flex. We used to add a prefix to flex in the earlier versions of the Flexbox model. We will have to use the vendor specific prefix till it becomes a default standard.
Each Flex Container has its own Flex Line. There is a logical Main axis and Cross axis in Flexbox wherein the Flex Line follows the Main axis. The default direction is always left to right and top to bottom. The following figure depicts the concept so that you will have a better understanding of it:
We will incorporate the CSS code into the HTML code using the <style> tag to keep it simple.
Example:
<html>
<head>
<style>
#flex-container { display: -webkit-flex; display: flex;
width: 500px; height: 500px;
background-color: Navy;
}
#flex-item {
background-color: Silver; width: 200px;
height: 200px; margin: 20px;
}
</style>
</head>
<body>
<div id="flex-container">
<div id="flex-item">ASP.NET</div>
<div id="flex-item">PHP5</div>
</div>
</body>
</html>
Output
As we see, the default direction is from left to right. Since the direction is not mentioned, the Flex Items are aligned along the Main axis.
read next to understand better ...